import React,{useEffect, useState } from 'react'
import {
    Button,
    Form,
    Input,
    TreeSelect,
} from 'antd';
import '../components.css'
import { Link, useLocation } from 'react-router-dom'
import CourseService from '../../services/CourseService';
import { CloseCircleOutlined, CaretUpOutlined, MailOutlined } from '@ant-design/icons';

export default function UpdateCourse() {
    const [courseName,setCourseName] = useState("")
    const [courseDateTime,setCourseDateTime] = useState("")
    const [courseCredit,setCourseCredit] = useState("")
    const [courseIntroduce,setCourseIntroduce] = useState("")
    const [courseTeacher,setCourseTeacher] = useState("")   

    const location = useLocation()
    let path = location.pathname;
    let id = path.split('/')[4];

    const updateCourse = (e) =>{
        e.preventDefault();
        const course = {courseName,courseDateTime,courseCredit,courseIntroduce,courseTeacher};
        console.log(course);
        CourseService.updateCourse(id,course).then(response=>{

        }).catch(error =>{
            console.log(error);
        })
    }
    useEffect(() =>{
        CourseService.getCourseById(id).then(response =>{
            setCourseName(response.data.courseName);
            setCourseDateTime(response.data.courseDateTime);
            setCourseCredit(response.data.courseCredit);
            setCourseTeacher(response.data.courseTeacher);            
            setCourseIntroduce(response.data.courseIntroduce);

        }).catch(error =>{
            console.log(error);
        })
    },[])
  return (
    <div className='UpdataCourse'>
            <div className="title" style={{ paddingBottom: '30px' }}>Update Course</div>
            <Form
                labelCol={{
                    span: 5,
                }}
                wrapperCol={{
                    span: 14,
                }}
                style={{
                    marginLeft: '2%',
                }}
                layout="horizontal"
            >
                    <Form.Item label="Course Name" tooltip="What is the course name?">
                        <Input value={courseName} onChange={e => setCourseName(e.target.value)} />
                    </Form.Item>

                    <Form.Item label="Course DateTime" >
                        <Input value={courseDateTime} onChange={e => setCourseDateTime(e.target.value)} />
                    </Form.Item>

                    <Form.Item label="Course Introduce" >
                        <Input value={courseIntroduce} onChange={e => setCourseIntroduce(e.target.value)} suffix={<MailOutlined />} />
                    </Form.Item>

                    <Form.Item label="Course Credit" >
                        <Input value={courseCredit} onChange={e => setCourseCredit(e.target.value)} suffix={<MailOutlined />} />
                    </Form.Item>

                    <Form.Item label="Course Teacher" >
                        <Input value={courseTeacher} onChange={e => setCourseTeacher(e.target.value)} suffix={<MailOutlined />} />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 5,
                            span: 16,
                        }}
                        style={{
                            marginTop: '50px'
                        }}
                    >
                        <Button type="primary" onClick={(e) => updateCourse(e)} htmlType="submit" icon={<CaretUpOutlined style={{ marginRight: "2px" }} />}>
                            <Link to='/courselist' style={{ color: "white" }}>Update</Link>
                        </Button>
                        <Button type='danger' style={{ marginLeft: "25px" }} icon={<CloseCircleOutlined style={{ marginRight: "2px" }} />}>
                            <Link to='/courselist' style={{ color: "white" }}>Close</Link>
                        </Button>
                    </Form.Item>

            </Form>
        </div>
  )
}
